<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A4LIFE</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./plugin/viewuiplus.css">
    <style>
        *{ margin: 0 ;padding: 0;user-select: none;}
        a{text-decoration: none;outline: none;}
        .a4{background-color: #eee;background-size: cover;min-height: 100vh;}
        .a4_cont{width: 1200px;margin: 0 auto;background-color: #eee;}
        .a4_cont *{box-sizing: border-box;}

        .a4_nav{padding: 30px 40px 20px 20px;}
        .a4_nav>h2{display: inline-block;color: #1e90ff;margin-right: 30px;font-size: 30px;}
        .a4_nav>a{display: inline-block;color: #666;margin-right: 10px;line-height: 34px;}
        .a4_nav>a:hover{color: #1e90ff;cursor: pointer;}
        .a4_nav>.a4_nav_active{color: #1e90ff;}
        .a4_desc{display: none;line-height: 34px;font-size: 14px;color: #333;}

        .a4_left{display: inline-block;vertical-align: middle;}
        .a4_left_item{height: 25px;text-align: center;padding: 0 10px;color: #666;font-size: 12px;margin-bottom: 5px;line-height: 25px;}
        .a4_left_item:last-child{margin-bottom: 0;}

        .a4_body{width: calc( 1160px - 60px );display: inline-block;vertical-align: middle;}
        
        .a4_head{}
        .a4_head_item{width: 25px;height: 25px;text-align: center;display: inline-block;color: #666;font-size: 13px;margin: 0 2.5px;}


        .a4_list{font-size: 0;}
        .a4_item{width: 25px;height: 25px;display: inline-block;margin: 2.5px;background-color: #ccc;cursor: pointer;transition: .1s;}
        .a4_item:hover{background-color: #1e90ff!important;position: relative;z-index: 1;transform: scale(1.6);}
        [data-spec]{background-color: #80deea!important;}

        .popup{display: none;}

        .a4_nav_right{float: right;}
    </style>
</head>
<body>

<div id="app"></div>

<script src="./plugin/vue.global.prod.js"></script>
<script src="./plugin/viewuiplus.min.js"></script>
<script>

    const { createApp,reactive,toRefs,computed } = Vue
    const app = createApp({
        template: 
            `<div class="a4">
                <div class="a4_cont">
                    <div class="a4_nav">
                        <h2>A4LIFE</h2>
                        <!-- <a class="a4_nav_active" href="/">首页</a> -->
                        <a class="a4_nav_right export">导出</a>
                        <a class="a4_nav_right edit">编辑</a>
                        <p class="a4_desc a4_nav_right"></p>
                    </div>
                    <div class="a4_left">
                        <div class="a4_left_item">年\\月</div>
                        <div class="a4_left_item" v-for="(item, index) in leftarr">
                            {{ item }}-{{ item+2 }}
                        </div>
                    </div>
                    <div class="a4_body">
                        <div class="a4_head">
                            <div class="a4_head_item" v-for="(item, index) in headarr">
                                {{ item }}
                            </div>
                        </div>
                        <div class="a4_list">
                            <div :data-inf="item.year+'-'+item.month" :data-spec="hasSpec(item.year,item.month)" class="a4_item" :style="{ 'background-color': state[hasState(item.year,item.month)]['color']
                            }" v-for="(item, index) in gridarr" @click="tips(state[hasState(item.year,item.month)]['text'],hasSpec(item.year,item.month))"></div>
                        </div>
                    </div>
                </div>
            </div>`
        ,setup(props,ctx) {
            let d = reactive({
                AGE: 78
                ,a4: {
                    birth: { year: 1995,month: 5 },
                    school: { year: 2002, month: 9 },
                    job: { year: 2017, month: 8 },
                    lan: { year: 2022, month: 10 },
                }
                ,state: [
                    { color: '',text: '地球在转' }
                    ,{ color: '#b2d09d',text: '我还是个孩子' }
                    ,{ color: '#b9de71',text: '德智体美劳的道路上奋勇直前' }
                    ,{ color: '#7bc785',text: '毒打从未停止' }
                    ,{ color: '#aaa',text: '累了，毁灭吧' }
                    ,{ color: '#fff',text: '未来生未来未至' }
                    // ,{ color: '#80deea',text: '未来生未来未至' }
                ]
            })
            
            // 左侧
            const LEFT = (d.AGE + 3) / 3
            d.leftarr = Array.from( new Array(LEFT),(item,i)=> d.a4.birth.year + (i*3) )

            // 上侧
            const HEAD = 12 * 3;
            d.headarr = Array.from(new Array(HEAD), (item, i) => i % 12 + 1 );

            // 表格
            const GRID = (d.AGE + 3) * 12;
            d.gridarr  = Array.from(new Array(GRID), (item, i) => {
                return { 
                    year: d.a4.birth.year + Math.floor(i / 12)
                    ,month: i % 12 + 1
                }   
            })

            let compDate = (...arg)=>{
                let [Y, M, y, m] = arg;
                return (y < Y || (y === Y && m <= M)) && (Y < new Date().getFullYear() || (new Date().getFullYear() === Y && new Date().getMonth()+1 >= M))
            }

            d.hasState = computed(() => {
                return (Y,M) =>{
                    let y = d.a4.birth.year,m = d.a4.birth.month
                    return compDate(Y,M,d.a4.lan.year,d.a4.lan.month) ? 4 :
                        compDate(Y,M,d.a4.job.year,d.a4.job.month) ? 3 : 
                        compDate(Y,M,d.a4.school.year,d.a4.school.month) ? 2 :
                        compDate(Y,M,y,m) ? 1 : 
                        (y<Y || (y===Y && m<=M)) && ( Y<(y+d.AGE) || ((y+d.AGE)===Y && m>M)) ? 5 : 0
                }
            })

            d.hasSpec = computed(()=>{
                return (Y,M)=>{
                    let { birth: b,school: s,job: j,lan: l } = d.a4
                    if (Y === b.year && M === b.month) {
                        return `${Y}年${M}月，老子降生了`
                    } else if (Y === s.year && M === s.month) {
                        return `${Y}年${M}月，我上小学了`
                    } else if (Y === j.year && M === j.month) {
                        return `${Y}年${M}月，正式接受社会毒打`
                    } else if (Y === l.year && M === l.month) {
                        return `${Y}年${M}月，残酷、绝望`
                    } else if (Y === (b.year + 70) && M === b.month) {
                        return `${Y}年${M}月，古稀之年，是时候退休了`
                    // } else if (Y === (b.year + 65) && M === b.month) {
                    //     return `65岁，顽疾缠身`
                    } else if (Y === (b.year + d.AGE) && M === b.month ) {
                        return `${Y}年${M}月，仙逝`
                    }
                }
            })

            d.tips = function(norm,text){
                let sta = !!text ? 'success' : 'info'
                ViewUIPlus.Message[sta]({
                    background: true,
                    content: text || norm
                });
            }

            return {
                ...toRefs(d)
            }
        }
        ,mounted() {
            // console.log(this)
        }
    })


    app.component('my-component', {
        /* ... */
    })

    app.mount('#app')

</script>
</body>
</html>